<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider
        v-model="collapsed"
        :trigger="null"
        collapsible
        style="flex: 0 0 220px;
        max-width: 220px;
        min-width: 220px;
        width: 220px;"
        >
      <div class="logo">
        <h4>测试测试</h4>
      </div>
      <div class="iconDiv">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        />
      </div>
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <a-menu-item key="1" style="padding-left: 0px">
          <a-icon type="home" />
          <span>首页</span>
        </a-menu-item>
        <a-menu-item key="2" style="padding-left: 0px">
          <a-icon type="video-camera" />
          <span>店铺</span>
        </a-menu-item>
        <a-menu-item key="3" style="padding-left: 0px">
          <a-icon type="upload" />
          <span>新品</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0;border-bottom: 2px solid rgb(223 223 223);">
        <div class="header-tool">
          <div class="icons">
            <a-icon type="search" />
            <a-icon type="bell" />
          </div>
          <div class="avatorInfo">
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <span>用户名</span>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: 'rgba(245,245,245,1)', minHeight: '280px' }"
      >
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
    };
  },
};
</script>
<style>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .iconDiv {
  background: rgb(40,57,74);
}
#components-layout-demo-custom-trigger .trigger {
  width: 100%;
  font-size: 18px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: white;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
#components-layout-demo-custom-trigger .logo h4 {
  line-height: 32px;
  height: 32px;
  color: white;
  text-align: center;
}
.ant-menu-item {
  text-align: center;
}
.ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
  background: rgb(25,34,46);
}
.header-tool {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.header-tool .icons {
  display: flex;
  justify-content: space-around;
  align-items: center;

  width: 80px;
  font-size: 20px;
}
.header-tool .avatorInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16px;
  width: 105px
;
}
.ant-menu-item-selected::after {
  width: 5px;
  height: 100%;
  position: relative;
  background: #1890ff;
  top: 0;
  left: 0;
}

</style>
